<template>
  <div class="flex h-full">
    <f-select-category
      v-model="searchForm.cate_id"
      @change="handleCategoryChange"></f-select-category>
    <!-- 列表 -->
    <div class="flex-1 ml-[10px] overflow-hidden">
      <el-tabs
        class="mb-[15px] p-[15px] pt-0"
        v-model="activeName">
        <el-tab-pane
          label="活动列表"
          name="1">
          <activity-list
            ref="activityListRef"
            :activeId="activeId"
            :searchForm="searchForm"></activity-list>
        </el-tab-pane>
        <el-tab-pane
          v-if="searchForm.cate_id"
          label="档期用户"
          name="2">
          <user-list
            v-if="activeName == '2'"
            ref="userListRef"
            :searchForm="searchForm"></user-list>
        </el-tab-pane>
        <!-- <el-tab-pane v-if="searchForm.cate_id" label="活动统计" name="3">
                <el-radio-group class="mb-[15px]" v-model="current">
                    <el-radio-button value="1">用户明细</el-radio-button>
                    <el-radio-button value="2">门店统计</el-radio-button>
                </el-radio-group>
                <user-data v-if="current === '1'" ref="userDataRef" :searchForm="searchForm"></user-data>
                <store-data v-if="current === '2'" ref="storeDataRef" :searchForm="searchForm"></store-data>
            </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import FSelectCategory from "@/addon/htscrm/components/f-select-category/index.vue";

import ActivityList from "./components/activity-list.vue";
import UserList from "./components/user-list.vue";
import useTabbarStore from "@/stores/modules/tabbar";
import { useRoute } from "vue-router";

const activityListRef = ref();
const userListRef = ref();
const activeName = ref("1");
const activeId = ref<string | undefined>();
const current = ref("1");
const searchForm = ref({
  cate_id: 0,
});

function handleCategoryChange(val: number) {
  localStorage.removeItem('videoParams') 
  //   alert(val);
  activeId.value = val ? String(val) : undefined;
  if (searchForm.value.cate_id == 0) {
    activeName.value = "1";
  }
  if (activeName.value === "1") {
    activityListRef.value?.reload();
  } else if (activeName.value === "2") {
    userListRef.value?.reload();
  }
}

const tabbarStore = useTabbarStore();
const route = useRoute();
console.log(1111, route);

onMounted(() => {
  tabbarStore.addTab(route);
  const params = JSON.parse(localStorage.getItem('videoParams') || '{}');
  if (params.cate_id) {
    searchForm.value.cate_id = params.cate_id;
  }
});
</script>

<style lang="scss" scoped>
:deep(.f-search) {
  background-color: var(--el-bg-color-page);
}
.el-tabs {
  background-color: var(--el-bg-color);
}
</style>
